import { ajax } from '../utils/ajax.js'
import '../lib/jquery.js'

//基本变量
let listBox = $('.list');//商品列表
let sale = $('.saleBox');//打折
let sort = $('.sortBox');//排序
let category = $('.category');//分类
let filter = $('.filterBox').first();//热销&折扣,因为.first()所以就是指代热销和折扣了，第一个出现的
let search = $('.search');//查找

//分页显示变量
let first = $('.first');//首页
let prev = $('.prev');//上一页
let next = $('.next');//下一页
let last = $('.last');//最后

let totalBox = $('.total');//第几页
let pagesize = $('.pagesize');//一页显示多少个
let go = $('.go');//跳转按钮
let jump = $('.jump')//jump多少页的数值

//获取服务器列表信息
let data = {
  current: 1,//进来直接第一页
  pagesize: 12,//一页12个
  search: '',//还没查
  filter: '',//还没过滤
  saleType: 10,//等于没打
  sortType: 'id',//排序类型id||sale||price
  sortMethod: 'ASC',//默认正序
  category: '',//分类筛选条件
}

let totalPage = 0;//总页数
//渲染商品列表
async function renderGoods() {
  let { data: { code, list, total } } = await ajax.get('/goods/list', { params: data });
  if (code == 0) {
    console.log('获取商品列表失败');
  }
  let s = ``;

  list.forEach(e => {
    s += `
      <li data-id="${e.goods_id}" id="mouse">
      <div class="show">
        <img src="${e.img_big_logo}">
        ${e.is_hot ? '<span class="hot">热销</span>' : ''}
        ${e.is_sale ? '<span>折扣</span>' : ''}
      </div>
      <div class="info">
        <p class="title">${e.title}</p>
        <p class="price">
          <span class="curr">￥${e.current_price}</span>
          <span class="old">￥${e.price}</span>
        </p>        
      </div>
    </li>
        `
  });

  //如果没有获取到list的长度
  if (list.length == 0) {
    data.current = 0;
    s = '<img src="../img/no.png" alt="">';
  }
  listBox.html(s);

  totalPage = total;
  //防止重名
  totalBox.text(`${data.current}/${totalPage}`);
  jump.val(`${data.current}`);

  //先把所有的都设为可以点
  first.removeClass('disable');
  next.removeClass('disable');
  prev.removeClass('disable');
  last.removeClass('disable');

  //如果当前页为第一页,那么就上一页和首页就不给按
  if (data.current <= 1) {
    prev.addClass('disable')
    first.addClass('disable')
  }

  //当前页就是最大页，就不给末页和下一页了
  if (data.current == totalPage) {
    next.addClass('disable');
    last.addClass('disable')
  }
}
renderGoods();

//分类标签的渲染
async function renderSort() {
  let { data: { code, list } } = await ajax.get('/goods/category');
  if (code == 0) return console.log('分类标签失败');
  // console.log(list);
  //成功
  //移除category下的所有子元素
  category.empty();

  let s = `<li class="active">全部</li>`;
  for(let i = 1;i < list.length ; i++){
    s += `<li>${list[i]}</li>`;
  }
  s += `<li>其他</li>`;
  //每一个都接着，然后渲染到html界面上
  category.html(s);
}
//进来就调用
renderSort();

//分类
category.on('click', ({ target }) => {
  //nodename方法需要大写使用
  if (target.nodeName == 'LI') {
    //点击了li标签就先全部移除active
    category.children().removeClass('active');
    //然后给事件目标添加上active
    target.classList.add('active');
    //获取点击文本
    let text = target.innerText;
    //点全部的话，等于没点，一进来就是全部
    if (text == '全部') {
      text = '';
    }
    //修改data里的category属性
    data.category = text;
    //渲染商品列表
    renderGoods();
  }
});
//首页
first.on('click', ({ target }) => {
  data.current = 1;
  renderGoods();
})
//末页
last.on('click', () => {
  data.current = totalPage;
  renderGoods();
})

//上一页
next.on('click', () => {
  if (data.current < totalPage) {
    data.current++;
  }
  renderGoods();
})

//上一页
prev.on('click', () => {
  if (data.current > 1) {
    data.current--;
  }
  renderGoods();
})

//跳转
go.on('click', () => {
  //先获取跳转的值
  let s = jump.val();
  if (s < 1 || s > data.totalPage) {
    alert('跳转不合理');
  }
  //设置当前页面是我要跳转的
  data.current = s;
  renderGoods();
})

//一页显示几条
pagesize.on('change', () => {
  data.pagesize = pagesize.val();
  data.current = 1;
  renderGoods();
})

filter.on('click', ({target}) => {
  if (target.nodeName == 'LI') {
    //先把LI的active都删除
    filter.children().removeClass('active');
    //当前点击的li再添加active
    target.classList.add('active');
    //获取分类类型
    data.filter = target.dataset.type;
    data.current = 1;
    renderGoods();
  }
})

sale.on('click', ({target}) => {
  if (target.nodeName == 'LI') {
    //先把LI的active都删除
    sale.children().removeClass('active');
    //当前点击的li再添加active
    target.classList.add('active');
    //获取分类类型
    data.saleType = target.dataset.type;

    data.current = 1;
    renderGoods();
  }
})

//排序方式
sort.on('click',({target})=>{
  if(target.nodeName == 'LI'){
    sort.children().removeClass('active');
    //事件目标加上active
    target.classList.add('active')
    //console.log(target);
    data.sortType = target.dataset.type;
    data.sortMethod = target.dataset.method;
    data.current = 1;
    renderGoods();
  }
})

//查找内容
search.on('input',()=>{
  data.search = search.val().trim();
  data.current = 1;
  //重新渲染
  renderGoods();
})

//点击进入详情页
listBox.on('click',({target})=>{
  if(target.nodeName == 'LI'){
    //获取商品id号
    let id = target.dataset.id;

    sessionStorage.setItem('id',id);

    location.href = './detail.html';
  }
})
